<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
        *{
        	margin:0;padding: 0;
        }
        li{
        	list-style: none;border:1px solid red;width:500px;
        }
        span
        {
        	background: green;display: inline-block;width:500px;
        }
        .div
        {
        	height:150px;display: none;
        }
	</style>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<script type="text/javascript">
        //入口函数
        $(function(){
        	//给所有的span注册点击事件
        	$('.title').click(function(){
        		//点击span,显示同级的div,找到当前span的兄弟div显示，其他的div隐藏
        		//next() :下一个兄弟节点
        		//siblings()：查找除了本身的兄弟节点
        		$(this).next().show().parent().siblings().children('div').hide();
        	});
        });
        

       

      
	</script>
</head>
<body>
    
    <div id="box">
    	<ul>
    		<li>
    			<span class="title">标题1</span>
    			<div class="div">这是标题1的div</div>
    		</li>
    		<li>
    			<span class="title">标题2</span>
    			<div class="div">这是标题2的div</div>
    		</li>
    		<li>
    			<span class="title">标题3</span>
    			<div class="div">这是标题3的div</div>
    		</li>
    		<li>
    			<span class="title">标题4</span>
    			<div class="div">这是标题4的div</div>
    		</li>
    		<li>
    			<span class="title">标题5</span>
    			<div class="div">这是标题5的div</div>
    		</li>
    	</ul>
    </div>
	
</body>
</html>